<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 > div {
            width: 300px;
            height: 100px;
            background: red;
        }
    </style>

</head>
<body>
<div id="div1">
    <input type="button" value="+1" @click="handlerAdd()">
    <input type="button" value="-1" @click="handlerPlus()">
    <!--    <div v-show="count==1">1</div>-->
    <!--    <div v-show="count==2">2</div>-->
    <!--    <div v-show="count==3">3</div>-->
    <div v-if="count==1">1</div>
    <div v-else-if="count==2">2</div>
    <div v-else="count==3">3</div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#div1',
        data: {
            count: 1
        },
        computed: {}, filters: {},
        watch: {}, created() {
        },
        mounted() {
        }, beforeDestroy() {
        },
        methods: {
            handlerAdd() {
                this.count++;
            },
            handlerPlus(){
                this. count--;
            }
        }
    })
</script>
</body>
</html>